<template>
    <div id="shows">
        
       <div class="more" v-if="nextTick == false">
        <mt-spinner type="fading-circle"
          color="rgb(100, 100, 100)"></mt-spinner> 努力加载中...
       </div>

       <div class="cinema-info">
           <div class="name textoverS">{{cinemaData.nm}}</div>
           <div class="location textoverS">{{cinemaData.addr}}</div>
           <div class="location-icon">
               <img src="../assets/wb.png" alt="">
           </div>
       </div>
       
       <div class="cinema-nav">
            <swiper ref="mySwiper" :options="swiperOption">
                <swiper-slide v-for="(movies,index) in showData.movies" :key="movies.id">
                    <img :src="myTools.picFix(movies.img)" alt="" @click="slideTo(index)">
                </swiper-slide>
            </swiper>
            <div class="bg-mask" v-if="showData.movies != undefined" 
            :style="{'background-image':`url(${myTools.picFix(showData.movies[mvIndex].img)})`}"></div>
       </div>

       <div class="movie-info">
           <div class="movie-title">
               <span class="title">{{slideShow.nm}}</span>
               <span class="grade" v-if="slideShow.sc != 0.0">
                   {{slideShow.sc}}<span>分</span>
                </span>
               <span class="grade" v-if="slideShow.sc == 0.0">
                   {{slideShow.wish}}<span>人想看</span>
                </span>
           </div>
           <div class="movie-desc">{{slideShow.desc}}</div>
       </div> 

       <div class="date-nav">
           <div class="scorll-bar">
                <div class="date" v-for="(shows,index) in slideShow.shows"
                 :key="index" @click="toShows(index)" 
                 :class="{active:index == dateIndex ? true : false}"
                 >
                    {{shows.dateShow}}
                </div>
           </div>
       </div>

       <div class="vip-block" v-if="plist.length != 0">
           <div class="vip-info" v-for="(vip,index) in showData.vipInfo" :key="index">
               <div class="label">折扣</div>
               <div class="text">{{vip.title}}</div>
               <div class="process-block">
                   <span class="process">{{vip.process}}</span>
               </div>
           </div>
       </div>

       <div class="seat-inner-wrap">
           <div class="seat-list">
               <div class="item-outer" v-for="(pl,index) in plist" :key="index">
                   <div class="item">
                       <div class="time-block">
                           <div class="begin textoverS">{{pl.tm}}</div>
                           <div class="end textoverS">{{pl.tm}}&nbsp;散场</div>
                       </div>
                       <div class="info-block">
                           <div class="lan textoverS">{{pl.lang}}&nbsp;{{pl.tp}}</div>
                           <div class="hall">{{pl.th}}</div>
                       </div>
                       <div class="price">
                           <div class="sellPr textoverS">
                               <span class="d">￥</span>
                               <span class="stone">{{Number(pl.vipPrice)+4}}</span>
                               <span class="icon">折扣卡</span>
                               <span class="vipPrice">￥{{pl.vipPrice}}</span>
                           </div>
                           <div class="extraDesc textoverS">{{pl.extraDesc}}</div>
                       </div>
                       <div class="btn-block">
                           <div class="btn" v-if="pl.forbiddenTip != undefined" style="backgroundColor:#aaa;">停售</div>
                           <div class="btn" v-else>购票</div>
                       </div>
                   </div>
               </div>
           </div>
           <!-- 场次已映完部分 -->
           <div class="no-seat" v-if="plist.length == 0">
               <div class="pic">
                   <img src="../assets/noseat.png" alt="">
               </div>
               <div class="text">今日场次已映完</div>
           </div>
       </div>

       <div class="tuan-wrap" v-if="dealList.length != 0">
           <div class="gap" style="height:10px; backgroundColor:#f0f0f0;"></div>
           <div class="tuan-list">
               <div class="tuan-title">影院超值套餐</div>
               <div class="tuan-item" v-for="(deal,index) in dealList" :key="index">
                   <div class="image">
                       <img v-lazy="myTools.picFix(deal.imageUrl)" alt="">
                       <span class="hot" v-if="deal.cardTag != undefined">HOT</span>
                   </div>
                   <div class="item-info">
                       <div class="item-title textoverM">
                           <span class="num" v-if="deal.recommendPersonNum == 2">双人</span>
                           <span class="num" v-else>单人</span>
                           {{deal.title}}
                       </div>
                       <div class="seal-num">{{deal.curNumberDesc}}</div>
                       <div class="price">
                           <span class="y">￥</span>{{deal.price}}
                       </div>
                       <div class="buy-btn">去购买</div>
                   </div>
               </div>
           </div>
       </div>

    </div>
</template>


<script>
import '../scss/shows.scss';

export default {
    created() {
        // 应用场景：结合$refs属性内的对象使用，或者获取页面内容渲染后的尺寸
        this.$nextTick(function(){
            // DOM渲染完成后触发
            console.log('nextTick refs',this.$refs.mySwiper);      // undefined
            this.nextTick = true;
        })

        this.cinemaId = this.$route.params.cinemaId;
        this.movieId = this.$route.query.movieId;

        this.axios.get('/ajax/cinemaDetail',{
            params:{
                cinemaId: this.cinemaId,
                movieId: this.movieId
            }
        }).then((res)=>{
            console.log("cinemaDetail",res);
            this.showData = res.data.showData;
            this.cinemaData = res.data.cinemaData;
            this.dealList = res.data.dealList.dealList;
            
            // 提交修改hearder名
            this.$store.commit('changeHT',this.showData.cinemaName);

            // 改变index的方法
            this.swiper.slideTo(res.data.movieIndex,1000,false);

            // refs获取当前组件内的子组件，可以给子组件设置ref属性，作为组件的“别名”，这样就相当于获取到子组件对象，可以直接调用子组件的方法
            console.log(this.$refs);

            // 请求完成后 增加监听事件 reachEnd到达最后一张
            this.$refs.mySwiper.$on('reachEnd',()=>{
                console.log('reachEnd');
            });

            // 滑动屏幕过渡结束时触发
            this.$refs.mySwiper.$on('transitionEnd',()=>{
                console.log('transitionEnd',this.swiper.snapIndex);
                this.swiper.slideTo(this.swiper.snapIndex,1000,false);
                this.mvIndex = this.swiper.snapIndex;
                this.slideShow = this.showData.movies[this.swiper.snapIndex];
                this.plist =  this.slideShow.shows[0].plist;

                this.dateIndex = 0;  // 重置选择的日期下标为第一个日期
            });

            this.slideShow = res.data.showData.movies[res.data.movieIndex];
            this.plist =  res.data.showData.movies[res.data.movieIndex].shows[0].plist;
            
        })
        
    },
    computed:{
      swiper() {
        //   获取swiper实例里的数据，包含改变index的方法
        return this.$refs.mySwiper.swiper
      }
    },
    data () {
        return {
            cinemaId: '',
            movieId: '',
            showData: [],
            cinemaData: [],
            mvIndex: 0,
            slideShow: {},
            plist: [],
            dealList: [],
            dateIndex: 0,
            nextTick: false,
            swiperOption: {
                effect: 'coverflow',
                grabCursor: true,
                centeredSlides: true,
                slidesPerView: 'auto',
                coverflowEffect: {
                    rotate: 30,
                    stretch: -50,
                    depth: 200,
                    modifier: 1,
                    slideShadows : true
                },
            }
        }
    },
    methods: {
        slideTo(index){
            console.log(index);     
            this.swiper.slideTo(index,1000,false);
            this.mvIndex = index;
            this.slideShow = this.showData.movies[index];
            console.log('this.slideShow',this.slideShow);

            this.plist =  this.slideShow.shows[0].plist;

            this.dateIndex = 0;  // 重置选择的日期下标为第一个日期
        },
        toShows(index){
            console.log(index);
            this.plist =  this.slideShow.shows[index].plist;
            this.dateIndex = index;
            console.log(this.dateIndex);
        }
    }
}
</script>

<style lang="scss" scoped>
.cinema-nav{
    position: relative;
    width: 100%;
    height: 135px;
    overflow: hidden;

  .swiper-container{
    top: 20px;
  }
  .swiper-inner {
    width: 100%;
    height: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 65px;
    height: 95px;
  }
  img{
    width: 100%;
    height: 100%;
  }
  .bg-mask{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 135px;
      overflow: hidden;
      background-repeat: no-repeat;
      background-size: 100%;
      filter: blur(15px);
      z-index: -99;
  }
}
</style>